<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box1 box2 box3" id="box4"></div>
    classList
    每一个元素天生自带一个属性 记录了该元素所有的类名
    <script>
        var box=document.querySelector('.box1');
        // console.log(box.classList);//输出的类名
        // console.log(box.classList[0]);
        // console.log(box.classList.length);

        // 1.add方法,向元素对象追加一个类名
        box.classList.add("box5");

        // 2.remove方法.在元素对象中删除指定的类名
        box.classList.remove("box2");

        // 3.toggle方法,切换类名.类名存在就删除,不存在添加
        box.classList.toggle("box3");

        // 4.contains方法.判断里面有没有该类.返回布尔值
       console.log(box.classList.contains("box3")); 
    </script>
</body>
</html>